import React from 'react';
import { connect } from 'dva';
import Flex from '../components/flexBox';
import Footer from '../components/footer';
import styles from './index.less';

const bgImg = require('../assets/img/bg.jpg');

function Start({ children, title }) {
    const prop = {
        vertical: true,
        header: (
            <div className={styles.header}>{`${title || 'KAKA_VR 计费系统店铺管理平台'}`}</div>
        ),
        footer: (
            <Footer
                copy="copyrights &copy; 2017"
            />
        ),
        style: {
            background: `url("${bgImg}") no-repeat center bottom`,
            backgroundSize: 'cover',
            flexFlow: 'column',
            flex: '1 1'
        },
        headerHeight: 32,
        footerHeight: 32,
    };
    return (
        <Flex
            {...prop}
        >
            {children}
        </Flex>
    );
}

function mapStateToProps({ app: { layout }, loading }) {
    return {
        layout,
        loading: loading.global
    };
}

export default connect(mapStateToProps)(Start);
